<<<<<<< HEAD
<template>
  <div class="container">
    <el-dialog
      :title="title"
      :visible="showDialog"
      width="400px"
      @close="btnCancel"
    >
      <el-form ref="dirRef" label-width="80px" :model="dirForm" :rules="rules">
        <el-form-item v-show="!show" label="所属学科" prop="subjectID">
          <el-select
            v-model="dirForm.subjectID"
            placeholder="请选择"
            style="width: 90%"
          >
            <!-- select上传的是value 显示的是label -->
            <el-option
              v-for="item in simList"
              :value="item.id"
              :label="item.subjectName"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input v-model="dirForm.directoryName" style="width: 90%" />
        </el-form-item>
      </el-form>
      <el-row slot="footer">
        <el-col>
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { add, detail, update } from "../../api/hmmm/directorys";
import { getSubList } from "../../api/hmmm/subjects";
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false, // 默认值
    },
  },
  data() {
    return {
      simList: [], // 接收学科数据
      dirForm: {
        subjectID: "", // 学科id
        directoryName: "",
        // subjectName: '',
        // creator: '',
        // addDate: '',
        // totals: '',
        // state: ''
      },
      idd: +this.$route.query.id || "",
      rules: {
        subjectID: [
          { required: true, message: "请输入学科名称", trigger: "blur" },
        ],
        directoryName: [
          { required: true, message: "请输入目录名称", trigger: "blur" },
        ],
      },
      show: false,
    };
  },
  computed: {
    title() {
      return this.dirForm.id ? "修改目录" : "新增目录";
    },
  },
  created() {
    // 先把
    this.getDirSim();
  },
  methods: {
    // 数据回显 调用详情接口 传入id返回详情
    async detail(id) {
      const { data } = await detail(id);
      this.dirForm = data;
    },
    async getDirSim() {
      // 获取目录列表
      const { data } = await getSubList({ pagesize: 999 });
      this.simList = data.items;
      if (this.idd) {
        this.show = true;
      }
      this.dirForm.subjectID = this.idd || "";
    },
    // 点击确定新增目录
    async btnOK() {
      try {
        this.$refs.dirRef.validate();
        if (this.dirForm.id) {
          // 有id
          await update(this.dirForm);
        } else {
          // 无id
          // 调接口新增
          await add(this.dirForm);
        }
        // 调用父组件刷新据
        this.$emit("getDirList");
        // 关闭弹窗
        this.$emit("update:showDialog", false);
      } catch (error) {
        console.log(error);
      }
    },
    btnCancel() {
      // 清空表单
      this.dirForm = {
        subjectID: "", // 学科名称
        directoryName: "",
      };
      // 移除校验
      this.$refs.dirRef.resetFields();
      this.$emit("update:showDialog", false);
    },
  },
};
</script>

<style scoped lang="scss"></style>
